var video=document.querySelector("#wrap>video");
var control=document.querySelector("#wrap>.control");
var inner=document.querySelector(".control .progress>.wrap>.inner");
var deeppink=document.querySelector(".control .progress .deeppink");

var switchNode=document.querySelector(".control .others>.sound>.swich");
var inner2=document.querySelector(".control .others>.sound>.progress>.wrap>.inner");
var deeppink2=document.querySelector(".control .others>.sound>.progress .deeppink");
var progress2=document.querySelector(".control .others>.sound>.progress");
var switchSpan=document.querySelector(".control .others>.sound>.swich>span");

var start=document.querySelector(".control .btns>.start");
var stop=document.querySelector(".control .btns>.stop");
var progress=document.querySelector(".control> .progress");

var now=document.querySelector(".control .others>.time>.now");
var all=document.querySelector(".control .others>.time>.all");
var fullScreen=document.querySelector(".control .others>.full-screen");
var fullScreenSpan=document.querySelector(".control .others>.full-screen>span");
var flag=0;
video.width=document.documentElement.clientWidth;
video.height=document.documentElement.clientHeight-control.offsetHeight;
window.onresize=function(){
	if(document.documentElement.clientWidth>=400){
		video.width=document.documentElement.clientWidth;
		video.height=document.documentElement.clientHeight-control.offsetHeight;
	}

}
var callback={
	move:function(){
		deeppink.style.width=this.offsetLeft+"px";
		var scale=this.offsetLeft/(progress.clientWidth-inner.offsetWidth);
		video.currentTime=video.duration*scale;

	}
}
var callback2={
	move:function(){
		deeppink2.style.width=this.offsetLeft+"px";
		now.innerHTML=changeTime(video.currentTime);
		var scale=this.offsetLeft/(progress2.clientWidth-inner2.offsetWidth);
		flag=scale;
		video.volume=scale;
		if (video.volume==0) {
			video.muted=true;
			addClass(switchSpan,"active");
		} else{
			removeClass(switchSpan,"active");
			video.muted=false;
		}

	}
}
$.drag(inner,callback);
$.drag(inner2,callback2);

var timer=0;
var isFullScreen = false;

player();
function player(){
	//全屏
	fullScreen.onclick=function(){
		if(isFullScreen) {
			// 全屏 ---> 不是全屏 --> remove
			removeClass(fullScreenSpan,"active")
			isFullScreen = false;
			if (document.exitFullscreen) {
			    document.exitFullscreen();
			}
			else if (document.mozCancelFullScreen) {
			    document.mozCancelFullScreen();
			}
			else if (document.webkitCancelFullScreen) {
			    document.webkitCancelFullScreen();
			}
			else if (document.msExitFullscreen) {
			      document.msExitFullscreen();
			}
		} else {
			addClass(fullScreenSpan,"active")
			isFullScreen = true
			var docElm = document.documentElement;
			//W3C
			if (docElm.requestFullscreen) {
			    docElm.requestFullscreen();
			}
			//FireFox
			else if (docElm.mozRequestFullScreen) {
			    docElm.mozRequestFullScreen();
			}
			//Chrome等
			else if (docElm.webkitRequestFullScreen) {
			    docElm.webkitRequestFullScreen();
			}
			//IE11
			else if (docElm.msRequestFullscreen) {
			  docElm.msRequestFullscreen();
			}
		}

	}


	//音量设置
	inner2.style.left=deeppink2.style.width=progress2.clientWidth-inner2.offsetWidth+"px";
	switchNode.onclick=function(){
		if (video.muted) {
			video.muted=false;
			video.volume=1;
			removeClass(switchSpan,"active");
			flag=flag==0?1:flag;
			inner2.style.left=deeppink2.style.width=(progress2.clientWidth-inner2.offsetWidth)*flag+"px";
		} else{
			video.muted=true;
			video.volume=0;
			addClass(switchSpan,"active");
			inner2.style.left=deeppink2.style.width=0+"px";
		}
	}




	//时间设置
	video.addEventListener("loadeddata",function(){
		all.innerHTML=changeTime(video.duration);
	})


	//进度条
	progress.onclick=function(ev){
		ev=ev||event;
		addClass(start,"active");
		video.play();
		timer=setInterval(move,50);
		video.currentTime=video.duration*((ev.clientX-this.offsetLeft)/(progress.clientWidth-inner.offsetWidth));

	}
	//开始按钮
	start.onclick=function(){
		if(video.paused){
			addClass(this,"active");
			video.play();
			timer=setInterval(move);
		}else{
			removeClass(this,"active");
			video.pause();
			clearTimeout(timer);
		}
	}
	//结束按钮
	stop.onclick=function(){
		removeClass(start,"active");
		video.pause();
		clearTimeout(timer);
		inner.style.left=deeppink.style.width=0+"px";
		video.currentTime=0;
	}
	function move(){
		inner.style.left=deeppink.style.width=(video.currentTime/video.duration)*(progress.clientWidth-inner.offsetWidth)+"px";
		now.innerHTML=changeTime(video.currentTime);

	}
}

//工具类
function changeTime(time){
	time=parseInt(time);
	var h=toZero(Math.floor(time/3600));
	var m=toZero(Math.floor(time%3600/60));
	var s=toZero(Math.round(time%3600));
	return h+":"+m+":"+s;
}

function toZero(num){
	var val="";
	if(num<10){
		val="0"+num;
	}else{
		val=val+num;
	}
	return val;
}

function addClass(node,className){
	var reg=new RegExp("\\b"+className+"\\b");
	if(!reg.test(node.className)){
		node.className+=(" "+className);
	}
}
function removeClass(node,className){
	if(node.className){
		var reg=new RegExp("\\b"+className+"\\b");
		var classes=node.className;
		node.className=classes.replace(reg,"");
		if(/^\s*$/g.test(node.className)){
			node.removeAttribute("class");
		}
	}else{
		node.removeAttribute("class");
	}
}